<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <Search :allOpts="formInline.allOpts" v-model="formInline.cOpts" @blur="blurInp"></Search>

          <!--<el-input v-model="search" placeholder="请输入内容" @blur="blurInp"></el-input>-->
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column label="ID" min-width="150">
        <template scope="scope">
          <!--<router-link :to="'page331/'+scope.row.id" >{{scope.row.id}}</router-link>-->
          <router-link
            :to="{ path: `page331/${scope.row.id}`, query: {trackingUrl: `${scope.row.trackingUrl}`,task_run_component_type:`${query.task_run_component_type}`}}">
            {{scope.row.id}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column v-for="item in tableTile"
                       min-width="150"
                       :prop="item.key"
                       :label="item.name">
      </el-table-column>
      <el-table-column
        min-width="150"
        prop="runningContainers"
        label="RunningContainers">
        <template scope="scope">
          <span>{{scope.row.runningContainers == -1 ? 'N/A' : scope.row.runningContainers}}</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="150"
        prop="allocatedVCores"
        label="AllocatedCPUVCores">
        <template scope="scope">
          <span>{{scope.row.allocatedVCores == -1 ? 'N/A' : scope.row.allocatedVCores}}</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="150"
        prop="allocatedMB"
        label="AllocatedMemoryMB">
        <template scope="scope">
          <span>{{scope.row.allocatedMB == -1 ? 'N/A' : scope.row.allocatedMB}}</span>
        </template>
      </el-table-column>
      <el-table-column v-for="item in tableTileB"
                       min-width="150"
                       :prop="item.key"
                       :label="item.name">
      </el-table-column>
      <el-table-column label="Progress" min-width="150">
        <template scope="scope">
          <el-progress :text-inside="true" :stroke-width="18" :percentage="parseInt(scope.row.progress)"></el-progress>
        </template>
      </el-table-column>
    </el-table>

    <!--&lt;!&ndash;分页&ndash;&gt;-->
    <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.start_index"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagination.page_count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.count"
        style="float:right"></el-pagination>
    </el-col>

  </section>
</template>

<script>

  import dao from '../../common/dao'
  import Search from '../../components/Search.vue'
  export default {
    components: {Search},
    data() {
      return {
        hhh: '',
        search: '',
        formInline: {
          allOpts: [{
            key: 'key',
            label: '条件',
            type: '',
            val: ''
          }], /*, {
           key: 'user',
           label: '用户',
           type: '',
           val: '',
           }, {
           key: 'finalStatus',
           label: '完成状态',
           type: 'sel',
           selOption: [{"label": "已完成", "value": "1"}, {"label": "未完成", "value": "2"}],
           val: '',
           }, {
           key: 'startDate',
           label: '开始时间',
           type: 'date',
           val: '',
           }],*/
          cOpts: [{
            key: 'key',
            label: '条件',
            type: '',
            val: '',
          }]
        },
        tableTile: [/*{
         key:"id",
         name:"ID"
         },*/{
          key: "user",
          name: "User"
        }, {
          key: "name",
          name: "Name"
        }, {
          key: "applicationType",
          name: "ApplicationType"
        }, {
          key: "queue",
          name: "Queue"
        }, {
          key: "priority",
          name: "ApplicationPriority"
        }, {
          key: "startedTime",
          name: "StartTime"
        }, {
          key: "finishedTime",
          name: "FinishTime"
        }, {
          key: "state",
          name: "state"
        }, {
          key: "finalStatus",
          name: "FinalStatus"
        },
        ],
        tableTileB: [
          {
            key: "pOfQueue",
            name: " % of Queue"
          }, {
            key: "pOfCluster",
            name: " % of Cluster"
          }, /*{
           key:"progress",
           name:"Progress"
           },*/{
            key: "trackingUrl",
            name: "trackingUrl"
          }, {
            key: "blacklistedNodes",
            name: "BlacklistedNodes"
          },
        ],
        tableData: [],
        data: [],
        fData: [],
        query: {},
        pagination: {
          count: 0,
          start_index: 1,
          page_count: 20,
        },
      }
    },
    methods: {
      handleSelectionChange(){
      },
      blurInp(e){
        let fname = ['id','user', 'name', 'applicationType','queue','state']
        let cOpts = this.formInline.cOpts || [];
        let key = cOpts[0].val
        this.fData = this.data.filter(item => {
          for (let one of fname) {
            if ((item[one] || '').indexOf(key) > -1) return true
          }
        })
        this.updateTableData()
      },
      handleSizeChange (val) {
        this.pagination.page_count = val;
        this.updateTableData()
      },
      handleCurrentChange (val) {
        this.pagination.start_index = val;
        this.updateTableData()
      },
      updateTableData(){
        let s, e
        s = this.pagination.page_count * (this.pagination.start_index - 1)
        e = this.pagination.page_count * this.pagination.start_index
        this.tableData = this.fData.slice(s, e);
        this.pagination.count = this.fData.length
      },
      getAppListHttp (e) {
        let arg = e || {};
        let query = this.$store.state.route.query || {};
        this.query = query;
        arg.task_id = query.user_task_detail_id || void 0;
        dao.getAppList(arg).then((res) => {
          if (res.FX.err) return false;
          if (res.body.appList) {
            //this.hhh = window.screen.height - 400;
            this.data = res.body.appList || [];
            this.fData = res.body.appList || [];
            this.updateTableData()
          }
        })
      }
    },
    mounted () {
      this.getAppListHttp();
    }
  }
</script>


<style scoped>

</style>